<template>
<!-- <div class="group">
  <text class="title">method = GET</text>
  <text class="count">{{getResult}}</text>
</div> -->
  <scroller class="scroller">
    <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
      <!-- <text class="indicator-text">加载中</text> -->
      <loading-indicator class="indicator"></loading-indicator>
    </refresh>
    <div class="down">
      <text class="text-down-c" :ref="'up'">下拉刷新有毒慎用</text>
    </div>
    <div :key="article.index" class="cell" v-for="article in recommendArticle">
      <div class="panel" v-if="article[0].num === 0" @click="click">
        <text class="text-1">{{article[0].title}}</text>
        <text class="text-2">{{article[0].summary}}</text>
      </div>
      <div class="panel" v-if="article[0].num !== 0" @click="click">
        <image :src="article[0].image_one" style="width: 655px;height: 500px;margin-bottom: 20px;"></image>
        <text class="text-1">{{article[0].title}}</text>
        <text class="text-2">{{article[0].summary}}</text>
      </div>
    </div>
    <div class="up" @click="up">
      <text class="text-3">刷新</text>
    </div>
    <div style="width: 750px; height:60px;background-color: #1b1a20;"></div>
  </scroller>
</template>
<script>
  import ArtCon from './ArtCon.vue'
  let stream = weex.requireModule('stream');
  const dom = weex.requireModule('dom')
  import Config from '../config/Config';
  const storage = weex.requireModule('storage')

  export default {
    data: () => ({
      recommendArticle: '',
      getResult: 'loading...',
      refreshing: false
    }),
    created () {
      storage.getItem('pcid', event => {
        this.getArticle(event.data)
      })
    },
    mounted() {
      // setTimeout(() => {
      //   console.log(this.recommendArticle)
      // }, 2000)
    },
    methods: {
      click() {
        console.log('5555')
        this.$emit('clickCon')
        this.$router.push('/artcon')   
      },
      up() {
        storage.getItem('pcid', event => {
          this.getArticle(event.data)
          const el = this.$refs.up
          dom.scrollToElement(el, {offset: -100})
        })
      },
      getArticle(id) {
        let me = this;
        let POST_URL = Config.getAPIDomain();
        stream.fetch({
          method: 'POST',
          url: POST_URL + 'article/recommendByPC',
          type: 'json',
          headers: {
            'pcid': id
          }
        }, function(ret) {
          if(!ret.ok){
            me.getResult = "request failed";
          }else{
            // me.getResult = JSON.stringify(ret.data);
            me.getResult = ret.data
            // console.log(me.getResult)
            me.recommendArticle = me.getResult
          }
        },function(response){
          me.getResult = "bytes received:"+response.length;
        })
      },
      onrefresh (event) {
        // modal.toast({ message: 'Refreshing', duration: 1 })
        this.refreshing = true
        setTimeout(() => {
          storage.getItem('pcid', event => {
            this.getArticle(event.data)
          })
          this.refreshing = false
        }, 500)
      },
      onpullingdown (event) {
        // console.log("dy: ")
        // console.log("dy: " + event.dy)
        // console.log("pullingDistance: " + event.pullingDistance)
        // console.log("viewHeight: " + event.viewHeight)
        // console.log("type: " + type)
      }
    }
  }
</script>
<style scoped>
  .refresh {
    width: 750;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }
  .indicator-text {
    color: #888888;
    font-size: 42px;
    text-align: center;
  }
  .indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: rgb(234, 162, 0);
  }
  .panel {
    width: 700px;
    /* height: 250px; */
    padding: 20px;
    margin-left: 25px;
    /* margin-right: 5px; */
    margin-top: 20px;
    margin-bottom: 20px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    border-radius: 10px;
    background-color: #F5F5F5;
  }
  .text-1 {
    font-size: 36px;
    text-align: left;
    color: #333;
  }
  .text-2 {
    font-size: 28px;
    text-align: left;
    color: #777;
  }
  .down {
    width: 750px;
    margin-top: 10px;
    flex-direction: column;
    justify-content: center;
  }
  .text-down-c {
    text-align: center;
    color: white;
  }
  .scroller {
    background-color: #1b1a20;
  }
  /* up */
  .up {
    width: 700px;
    height: 100px;
    margin-left: 25px;
    background-color: white;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
  }
  .text-3 {
    font-size: 28px;
    text-align: center;
    color: #333;
  }
</style>